<template>
  <span class="inline-note">
    <el-tooltip v-if="word.note || word.lecture" class="item" :content="tip" placement="top-start" effect="light">
      <span v-if="word.pinyin" class="note">
        <ruby class="pinyin">{{ word.text }}<rt>{{ word.pinyin }}</rt></ruby>
      </span>
      <span v-if="!word.pinyin" class="note">{{ word.text }}</span>
    </el-tooltip>
    <span v-if="!word.note && !word.lecture && word.pinyin" class="pinyin">
      <ruby class="pinyin">{{ word.text }}<rt>{{ word.pinyin }}</rt></ruby>
    </span>
  </span>
</template>

<script>
export default {
  props: ["word"],
  computed: {
    tip() {
      let word = this.word;
      if (word.note || word.lecture) {
        return word.note || word.lecture;
      }
      return word.content;
    },
  },
};
</script>